<template>
    <div :class="`tech-select-cell ${mode}`" @click="clickAction">
        <div class="cell-label title-color">{{label}}</div>
        <div class="cell-value title-color">
            <slot></slot>
        </div>
        <div class="cell-icon">
            <MiniIcon name="right" theme="#7D7D83" size="14" />
        </div>
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'SelectCell', // 选项Cell
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        label: String,
        value: {
            type: String,
            default: '',
        },
        valueTip: {
            type: String,
            default: '',
        },
    },
    methods: {
        clickAction() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
.tech-select-cell {
    .mode-white();
    .flex();
    min-height: 20px;
    .p-h(@shop-gap-md);
    .p-v(@gap);
    align-items: center;
    .cell-label {
        width: 38px;
        font-size: @font-size-sm;
        font-weight: 500;
    }
    .cell-value {
        line-height: 20px;
        font-size: @font-size-sm;
        font-weight: 400;
        flex: 1;
        .flex();
        align-items: center;
    }
}
</style>
